<template>
	<view class="container">
		<image style="height:65px;width:230px;opacity: 0.8;" src="../../static/hesheng.jpg" alt="" />
		<!-- 		<image style="height:100px;right:5px;opacity: 0.8;" src="../../static/hesheng.jpg" alt="" /> -->
		<view class="loginTitle" style="font-size: 36px;color: #323333;">站房智辅系统智能多功能终端</view>
		<view class="inputContainer">
			<view class="inputWrapper">
				<!-- 		<view class="icon ">
					<image style="width: 25px; height:25px;" src="../../static/denglu_14.png" alt="" class="icon" />
				</view> -->

				<uni-easyinput prefixIcon="person" v-model="loginName" placeholder="请输入账户">
				</uni-easyinput>
				<!-- <input v-model="loginName" type="text" class="inputField" placeholder="请输入账户" /> -->
			</view>
			<view class="inputWrapper">
				<!-- <view class="icon ">
					<image style="width: 25px; height:25px;" src="../../static/denglu_16.png" alt="" class="icon" />
				</view> -->
				<uni-easyinput prefixIcon="locked" v-model="pwd" type="password" placeholder="请输入密码"> </uni-easyinput>
				<!-- <input v-model="pwd" type="password" class="inputField" placeholder="请输入密码" /> -->
			</view>
		</view>
		<button class="loginButton" @click="login()">登录</button>
	</view>

</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { loginUser } from '@/data/loginUser.js'
	import md5 from 'blueimp-md5'
	const loginName = ref('')
	const pwd = ref('')


	onMounted(() => {

	})

	const login = () => {
		// const encryptPwd = md5(pwd.value)
		// if (loginUser.loginName == loginName.value && loginUser.password == encryptPwd) {
		// 	console.log('登录成功');
		// 	uni.setStorageSync('userInfo', loginUser)
		// 	//登录成功提示 记录返回值token 跳转路由
		uni.showToast({
			title: '登录成功',
			icon: 'none',
			duration: 1000
		});

		uni.navigateTo({
			url: '/pages/onBoarding/onBoarding'
		})
		// } else {
		// 	uni.showToast({
		// 		title: '账户或密码错误',
		// 		icon: 'none'
		// 	});
		// 	loginName.value = ''
		// 	pwd.value = ''
		// }
	}
</script>

<style>
	html,
	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.container {

		background-image: url('../../static/login-bcg.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		/* 子元素垂直排列 */
		align-items: center;
		justify-content: center;
		height: 92vh;
		width: 100%;
		text-align: center;
	}

	.loginLogo,
	.loginTitle {
		margin: 0;
		padding: 0;

	}

	.loginLogo {
		font-size: 24px;
		color: #333;

	}

	.loginTitle {
		margin-top: 20px;
		font-size: 26px;
		color: #666;
		font-weight: bold;

	}

	.inputContainer {
		margin-top: 50px;
		width: 450px;
	}

	.inputWrapper {
		/* border: 1px solid #5dc7c8; */
		/* border-radius: 6px; */
		position: relative;
		margin-bottom: 20px;

		.icon {
			position: absolute;
			left: 15px;
			top: 50%;
			transform: translateY(-50%);
			pointer-events: none;
			/* 防止点击事件传递给图标 */

		}



	}

	.is-input-border {
		border: none !important;
		padding: 10px;

	}

	.uni-input-placeholder {
		color: #999999;
		font-size: 16px !important;
	}



	.loginButton {
		width: 450px;
		padding: 10px 0;
		margin-top: 40px;
		background-color: #5dc7c8;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
	}

	.loginButton:hover {
		background-color: #38b2d4;

	}
</style>